<template>
  <div class="content has-text-centered">
    <!--导航栏-->
    <div id="header_outer" style="z-index: 1000; width:100%">
      <div class="container">
        <div class="header_section">
          <div class="logo"><a href="javascript:void(0)">
            <!--<img src="../../static/img/uulogoyuan.png" height="50" width="50" alt=""/>-->
            <img src="../../static/img/1116152428.png" height="30" width="50"/></a></div>
          <nav class="nav" id="nav">
            <ul class="toggle">
              <li><a href="#service">功能组成</a></li>
              <li><a href="#Portfolio">资源集合</a></li>
              <li><a href="#work_outer">交互式科学计算</a></li>
              <li><a href="#team">城市应用服务</a></li>
              <!--<li><a>登录</a></li>-->
            </ul>
            <ul class="">
              <li><a href="#service">功能组成</a></li>
              <li><a href="#Portfolio">资源集合</a></li>
              <li><a href="#work_outer">交互式科学计算</a></li>
              <li><a href="#team">城市应用服务</a></li>
              <li><a @click="openLogin">登录</a></li>
            </ul>
          </nav>
          <a class="res-nav_click animated wobble wow"  href="javascript:void(0)"><i class="fa-bars"></i></a> </div>
      </div>
    </div>
    <!--Home-->
    <section id="top_content" class="top_cont_outer" style="height:561px">
      <div class="top_cont_inner" style="height:100%">
        <div class="container">
          <div class="top_content">
            <div class="row">
              <div class="col-lg-5 col-sm-7">
                <div class="top_left_cont flipInY wow animated">
                  <h2>地理大数据时空解析原型系统</h2>
                  <p> Prototypical Analysis System for Geospatio-temporal Big Data</p>
                  <a href="#service" class="learn_more2">了解更多</a> </div>
              </div>
              <div class="col-lg-7 col-sm-5"> </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!--功能组成-->
    <section id="service">
      <div class="container">
        <h2>功能组成</h2>
        <div class="service_area">
          <div class="row" style="position: relative">
            <div class="col-lg-4">
              <div class="service_block">
                <div class="service_icon delay-03s animated wow  zoomIn" @click="toData">
                  <span><img src="../../static/img/资源集合.svg" height="60" width="60" style="margin-top: 10px"/>
                    <!--<i class="fa fa-flash fa-2x"></i>-->
                  </span>
                </div>
                <h3 class="animated fadeInUp wow">资源集合</h3>
                <p class="animated fadeInDown wow">大量多源公共地理时空数据<p>
                <p>数据检索计算等算法</p>
                <p>工具图表地图等可视化组件 </p>
              </div>
            </div>
            <div class="col-lg-4">
              <div class="service_block">
                <div class="service_icon icon2  delay-03s animated wow zoomIn" @click="toModel">
                  <span>
                    <img src="../../static/img/分析环境.svg" height="60" width="60" style="margin-top: 10px"/>
                    <!--<i class="fa fa-comments"></i>-->
                  </span>
                </div>
                <h3 class="animated fadeInUp wow">交互式科学计算</h3>
                <p class="animated fadeInDown wow">高性能的分布式计算</p>
                <p>模件式的分析流程</p>
                <p>实时交互的结果展示 </p>

                <!--<p class="animated fadeInDown wow">Proin iaculis purus consequat sem cure digni. Donec porttitora entum suscipit  aenean rhoncus posuere odio in tincidunt.</p>-->
              </div>
            </div>
            <div class="col-lg-4">
              <div class="service_block">
                <div class="service_icon icon3  delay-03s animated wow zoomIn" @click="toManage">
                  <span>
                    <img src="../../static/img/仪表盘.svg" height="60" width="60" style="margin-top: 10px"/>
                    <!--<i class="fa fa-shield"></i>-->
                  </span>
                </div>
                <h3 class="animated fadeInUp wow">城市应用服务</h3>
                <p class="animated fadeInDown wow">面向各种城市应用</p>
                <p>多源数据集成展示</p>
                <!--<p class="animated fadeInDown wow">Proin iaculis purus consequat sem cure digni. Donec porttitora entum suscipit  aenean rhoncus posuere odio in tincidunt.</p>-->
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!--资源集合-->
    <section id="Portfolio" class="content">
      <!-- Container -->
      <div class="container portfolio-title">
        <h2>资源集合</h2>
      </div>
      <!-- Container -->
      <div class="portfolio-top"></div>
      <!-- Portfolio Plus Filters -->
      <div class="portfolio" style="padding: 30px 0px">
        <!--Portfolio Filters-->
        <!--<div id="filters" class="sixteen columns">-->
        <!--<ul class="clearfix">-->
        <!--<li><a id="all" href="#" data-filter="*" class="active">-->
        <!--<h5>All</h5>-->
        <!--</a></li>-->
        <!--<li><a class="" href="#" data-filter=".branding">-->
        <!--<h5>Branding</h5>-->
        <!--</a></li>-->
        <!--<li><a class="" href="#" data-filter=".design">-->
        <!--<h5>Design</h5>-->
        <!--</a></li>-->
        <!--<li><a class="" href="#" data-filter=".photography">-->
        <!--<h5>Photography</h5>-->
        <!--</a></li>-->
        <!--<li><a class="" href="#" data-filter=".videography">-->
        <!--<h5>Videography</h5>-->
        <!--</a></li>-->
        <!--<li><a class="" href="#" data-filter=".web">-->
        <!--<h5>Web</h5>-->
        <!--</a></li>-->
        <!--</ul>-->
        <!--</div>-->
        <!--/Portfolio Filters -->

        <!-- Portfolio Wrap -->
        <div class="isotope" style="position: relative; overflow: hidden; height: 320px;" id="portfolio-wrap">
          <!-- Portfolio Item With PrettyPhoto  -->
          <div style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-five   videography isotope-item">
            <a style="margin-left: 60px;margin-top: 110px;background:#f56eab;" class="contact_btn" @click="toData">进入资源集合</a>
            <!--href="#/project/allProject"-->
            <!--<div class="portfolio-image"> <img src="../../static/img/portfolio_pic1.jpg"  alt="Portfolio 1"></div>-->
            <!--<a title="Starbucks Coffee" rel="prettyPhoto[galname]" href="http://clapat.ro/themes/newave/images/portfolio/portfolio2.jpg">-->
            <!--<div class="project-overlay">-->
            <!--<div class="project-info">-->
            <!--<div class="zoom-icon"></div>-->
            <!--<h4 class="project-name">Leica Camera</h4>-->
            <!--<p class="project-categories">Videography</p>-->
            <!--</div>-->
            <!--</div>-->
            <!--</a> -->
          </div>

          <!--1-->
          <div style="position: absolute; left: 0px; top: 0px; transform: translate3d(337px, 0px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-five  design isotope-item">
            <div class="portfolio-image"> <img src="../../static/img/DEM.svg" alt="Portfolio 1"> </div>
            <div class="project-overlay" style="margin-left: -120px">
              <div class="open-project-link"> <a class="open-project" href="http://clapat.ro/themes/newave/project-video-expander.html" title="Open Project"></a> </div>
              <div class="project-info">
                <div class="zoom-icon"></div>
                <h4 class="project-name">DEM元数据</h4>
                <!--<p class="project-categories">Design</p>-->
              </div>
            </div>
          </div>

          <!-- 2 -->
          <div style="position: absolute; left: -80px; top: 0px; transform: translate3d(674px, 0px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-five  design  isotope-item">
            <div class="portfolio-image"> <img src="../../static/img/Twitter.svg" alt="Portfolio 1"> </div>
            <div class="project-overlay" style="margin-left: -115px">
              <div class="open-project-link"> <a class="open-project" href="http://clapat.ro/themes/newave/project-normal-expander-1.html" title="Open Project"></a> </div>
              <div class="project-info">
                <div class="zoom-icon"></div>
                <h4 class="project-name">Twitter</h4>
                <!--<p class="project-categories">Design</p>-->
              </div>
            </div>
          </div>

          <!-- 3-->
          <div style="position: absolute; left: -180px; top: 0px; transform: translate3d(1011px, 0px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-five  photography  branding web isotope-item">
            <div class="portfolio-image"> <img src="../../static/img/POI.svg" alt="Portfolio 1"> </div>
            <div class="project-overlay" style="margin-left: -120px">
              <div class="open-project-link"> <a class="open-project" href="http://clapat.ro/themes/newave/project-fullscreen-expander-1.html" title="Open Project"></a> </div>
              <div class="project-info">
                <div class="zoom-icon"></div>
                <h4 class="project-name">POI数据</h4>
                <!--<p class="project-categories">Photography, Web, Branding</p>-->
              </div>
            </div>
          </div>


          <!-- 4-->
          <!--<div style="position: absolute; left: -240px; top: 0px; transform: translate3d(1300px, 0px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-five  photography  branding web isotope-item">-->
          <!--<div class="portfolio-image"> <img src="../../static/img/dazhong.svg" alt="Portfolio 1"> </div>-->
          <!--<div class="project-overlay" style="margin-left: -125px">-->
          <!--<div class="open-project-link"> <a class="open-project" href="http://clapat.ro/themes/newave/project-fullscreen-expander-1.html" title="Open Project"></a> </div>-->
          <!--<div class="project-info">-->
          <!--<div class="zoom-icon"></div>-->
          <!--<h4 class="project-name">大众点评</h4>-->
          <!--&lt;!&ndash;<p class="project-categories">Photography, Web, Branding</p>&ndash;&gt;-->
          <!--</div>-->
          <!--</div>-->
          <!--</div>-->
          <!--5-->
          <div style="position: absolute; left: -240px; top: 0px; transform: translate3d(1300px, 0px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-five  photography  branding web isotope-item">
            <div class="portfolio-image"> <img src="../../static/img/dazhong.svg" alt="Portfolio 1"> </div>
            <div class="project-overlay" style="margin-left: -125px">
              <div class="open-project-link"> <a class="open-project" href="http://clapat.ro/themes/newave/project-fullscreen-expander-1.html" title="Open Project"></a> </div>
              <div class="project-info">
                <div class="zoom-icon"></div>
                <h4 class="project-name">大众点评</h4>
                <!--<p class="project-categories">Photography, Web, Branding</p>-->
              </div>
            </div>
          </div>


          <!-- Portfolio Item FullScreen Expander -->
          <!--<div style="position: absolute; left: 0px; top: 110px; transform: translate3d(0px, 240px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four  design isotope-item">-->
          <!--<div class="portfolio-image"> <img src="../../static/img/dazhong.svg" alt="Portfolio 1"> </div>-->
          <!--<div class="project-overlay">-->
          <!--<div class="open-project-link"> <a class="open-project" href="http://clapat.ro/themes/newave/project-fullscreen-expander-2.html" title="Open Project"></a> </div>-->
          <!--<div class="project-info">-->
          <!--<div class="zoom-icon"></div>-->
          <!--<h4 class="project-name">大众点评</h4>-->
          <!--<p class="project-categories">Design</p>-->
          <!--</div>-->
          <!--</div>-->
          <!--</div>-->
          <!--/Portfolio Item FullScreen Expander -->

          <!-- 2-1-->
          <div style="position: absolute; left: 0px; top: -80px; transform: translate3d(337px, 240px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four  web isotope-item">
            <div class="portfolio-image"> <img src="../../static/img/chuzu.svg" alt="Portfolio 1"> </div>
            <div class="project-overlay" style="margin-left: -125px">
              <div class="open-project-link"> <a class="open-project" href="http://clapat.ro/themes/newave/project-normal-expander-2.html" title="Open Project"></a> </div>
              <div class="project-info">
                <div class="zoom-icon"></div>
                <h4 class="project-name">出租车轨迹</h4>
                <!--<p class="project-categories">Web</p>-->
              </div>
            </div>
          </div>

          <!-- 2-2 -->
          <div style="position: absolute; left: -80px; top: -60px; transform: translate3d(674px, 240px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four  design web isotope-item">
            <div class="portfolio-image"> <img src="../../static/img/baidu.svg" alt="Portfolio 1"> </div>
            <a href="http://clapat.ro/themes/newave/project-external-1.html" class="external">
              <div class="project-overlay" style="margin-left: -100px">
                <div class="project-info">
                  <div class="zoom-icon"></div>
                  <h4 class="project-name">百度街景影像</h4>
                  <!--<p class="project-categories">Design, Web</p>-->
                </div>
              </div>
            </a> </div>

          <!-- 2-3 -->
          <div style="position: absolute; left: -180px; top: -70px; transform: translate3d(1011px, 240px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four   photography isotope-item">
            <div class="portfolio-image"> <img src="../../static/img/dimingdizhi.svg" alt="Portfolio 1"> </div>
            <a title="Stereo Headphones" rel="prettyPhoto[galname]" href="http://clapat.ro/themes/newave/images/portfolio/portfolio8.jpg">
              <div class="project-overlay" style="margin-left: -120px">
                <div class="project-info">
                  <div class="zoom-icon"></div>
                  <h4 class="project-name">地名地址</h4>
                  <!--<p class="project-categories">Photography</p>-->
                </div>
              </div>
            </a> </div>

          <!--2-4-->
          <div style="position: absolute; left: -240px; top: -70px; transform: translate3d(1300px, 240px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four   photography isotope-item">
            <div class="portfolio-image"> <img src="../../static/img/gongjiao.svg" alt="Portfolio 1"> </div>
            <a title="Stereo Headphones" rel="prettyPhoto[galname]" href="http://clapat.ro/themes/newave/images/portfolio/portfolio8.jpg">
              <div class="project-overlay" style="margin-left: -110px">
                <div class="project-info">
                  <div class="zoom-icon"></div>
                  <h4 class="project-name">城市公交线路</h4>
                  <!--<p class="project-categories">Photography</p>-->
                </div>
              </div>
            </a> </div>
        </div>
        <!--/Portfolio Wrap -->
      </div>
      <!--/Portfolio Plus Filters -->
      <div class="portfolio-bottom"></div>
      <!-- Project Page Holder-->
      <div id="project-page-holder">
        <div class="clear"></div>
        <div id="project-page-data"></div>
      </div>
      <!--/Project Page Holder-->
    </section>
    <!--交互式分析环境-->
    <section id="work_outer"><!--main-section-start-->
      <div class="top_cont_latest">
        <div class="container" style="padding-top: 50px">
          <h2 style="margin-bottom: 30px;margin-left: 120px">交互式科学计算</h2>
          <div class="work_section">
            <div class="row" style="position: relative">
              <div class="col-lg-6 col-sm-6 wow fadeInLeft delay-05s" style="margin-left: 250px">
                <div class="service-list">
                  <div class="service-list-col1"> <i class="icon-doc"></i> </div>
                  <div class="service-list-col2">
                    <h3>大量多维的公共数据</h3>
                    <!--<p>Proin iaculis purus digni consequat sem digni ssim. Donec entum digni ssim.</p>-->
                  </div>
                </div>
                <div class="service-list">
                  <div class="service-list-col1"> <i class="icon-comment"></i> </div>
                  <div class="service-list-col2">
                    <h3>高性能的分布式计算</h3>
                    <!--<p>Proin iaculis purus consequat sem digni ssim. Digni ssim porttitora .</p>-->
                  </div>
                </div>
                <div class="service-list">
                  <div class="service-list-col1"> <i class="icon-database"></i> </div>
                  <div class="service-list-col2">
                    <h3>模件式的分析方法</h3>
                    <!--<p>Proin iaculis purus consequat digni sem digni ssim. Purus donec porttitora entum.</p>-->
                  </div>
                </div>
                <div class="service-list">
                  <div class="service-list-col1"> <i class="icon-cog"></i> </div>
                  <div class="service-list-col2">
                    <h3>实时交互的结果展示</h3>
                    <!--<p>Proin iaculis purus consequat sem digni ssim. Sem porttitora entum.</p>-->
                  </div>
                </div>
                <div class="work_bottom">
                  <a style="background:#7cc576;margin-left:230px;margin-top: 80px"  class="contact_btn" @click="toModel">进入交互式科学计算</a>
                  <!--href="#/dataSource/pubData"-->
                </div>
              </div>
              <figure class="col-lg-6 col-sm-6  text-right wow fadeInUp delay-02s"> </figure>
            </div>
          </div>
        </div>
        <!--<div class="work_pic"><img src="img/dashboard_pic.png" alt=""></div>-->
      </div>
    </section>
    <!--城市应用服务-->
    <section class="main-section team" id="team"><!--main-section team-start-->
      <div class="container">
        <h2 style="margin-bottom: 40px">城市应用服务</h2>
        <!--<h6>Take a closer look into our amazing team. We won’t bite.</h6>-->
        <div class="team-leader-block clearfix">
          <div class="team-leader-box">
            <div class="team-leader wow fadeInDown delay-03s">
              <!--<div class="team-leader-shadow"><a href="javascript:void(0)"></a></div>-->
              <img src="../../static/img/yibiaopan1.png" height="216" width="291" alt="">
              <!--<img src="../../static/img/portfolio_pic1.jpg" alt="">-->
              <!--<ul>-->
              <!--<li><a href="javascript:void(0)" class="fa-twitter"></a></li>-->
              <!--<li><a href="javascript:void(0)" class="fa-facebook"></a></li>-->
              <!--<li><a href="javascript:void(0)" class="fa-pinterest"></a></li>-->
              <!--<li><a href="javascript:void(0)" class="fa-google-plus"></a></li>-->
              <!--</ul>-->
            </div>
            <h3 class="wow fadeInDown delay-03s">城市应用服务</h3>
            <!--<span class="wow fadeInDown delay-03s">Chief Executive Officer</span>-->
            <!--<a style="margin-left: 60px;margin-top: 40px;background:#49b5e7;"  class="contact_btn" @click="toManage">进入数据仪表盘</a>-->
            <!--href="#/appManagement/dataExplorerM"-->
            <!--<p class="wow fadeInDown delay-03s">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat sollicitudin cursus. Dolor sit amet, consectetur adipiscing elit proin consequat.</p>-->
          </div>
          <div class="team-leader-box">
            <div class="team-leader  wow fadeInDown delay-06s">
              <!--<div class="team-leader-shadow"><a href="javascript:void(0)"></a></div>-->
              <img src="../../static/img/yibiaopan2.png" height="216" width="291" alt="">
              <!--<img src="../../static/img/portfolio_pic1.jpg" alt="">-->
              <!--<ul>-->
              <!--<li><a href="javascript:void(0)" class="fa-twitter"></a></li>-->
              <!--<li><a href="javascript:void(0)" class="fa-facebook"></a></li>-->
              <!--<li><a href="javascript:void(0)" class="fa-pinterest"></a></li>-->
              <!--<li><a href="javascript:void(0)" class="fa-google-plus"></a></li>-->
              <!--</ul>-->
            </div>
            <h3 class="wow fadeInDown delay-06s">出租车交通</h3>
            <!--<span class="wow fadeInDown delay-06s">Product Manager</span>-->
            <a style="margin-left: 60px;margin-top: 60px;background:#49b5e7;"  class="contact_btn" @click="toManage">进入城市应用服务</a>

            <!--<p class="wow fadeInDown delay-06s">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat sollicitudin cursus. Dolor sit amet, consectetur adipiscing elit proin consequat.</p>-->
          </div>
          <div class="team-leader-box">
            <div class="team-leader wow fadeInDown delay-09s">
              <!--<div class="team-leader-shadow"><a href="javascript:void(0)"></a></div>-->
              <img src="../../static/img/yibiaopan3.png" height="216" width="291" alt="">
              <!--<img src="../../static/img/portfolio_pic1.jpg" alt="">-->
              <!--<ul>-->
              <!--<li><a href="javascript:void(0)" class="fa-twitter"></a></li>-->
              <!--<li><a href="javascript:void(0)" class="fa-facebook"></a></li>-->
              <!--<li><a href="javascript:void(0)" class="fa-pinterest"></a></li>-->
              <!--<li><a href="javascript:void(0)" class="fa-google-plus"></a></li>-->
              <!--</ul>-->
            </div>
            <h3 class="wow fadeInDown delay-09s">空气污染</h3>
            <!--<span class="wow fadeInDown delay-09s">Accountant</span>-->
            <!--<p class="wow fadeInDown delay-09s">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat sollicitudin cursus. Dolor sit amet, consectetur adipiscing elit proin consequat.</p>-->
          </div>
        </div>

      </div>
    </section>

    <!--<h2 class="is-title is-bold">地理大数据时空解析原型系统</h2>-->
    <!--<div class="columns is-vcentered">-->
    <!--<div class="column is-6 is-offset-3">-->
    <!--<div class="box">-->
    <!--<div v-show="error" style="color:red; word-wrap:break-word;">{{ error }}</div>-->
    <!--<form v-on:submit.prevent="login">-->
    <!--<label class="label">用户</label>-->
    <!--<p class="control">-->
    <!--<input v-model="data.body.username" class="input" type="text" placeholder="email@example.org">-->
    <!--</p>-->
    <!--<label class="label">密码</label>-->
    <!--<p class="control">-->
    <!--<input v-model="data.body.password" class="input" type="password" placeholder="password">-->
    <!--</p>-->

    <!--<p class="control">-->
    <!--<el-checkbox v-model="data.rememberMe" @change="onChangeRememberMe">记住我</el-checkbox>-->
    <!--</p>-->

    <!--<hr>-->
    <!--<p class="control">-->
    <!--<button type="submit" class="button is-primary" @click="login()">登录</button>-->
    <!--<button class="button is-default">取消</button>-->
    <!--</p>-->
    <!--</form>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
    <!--<ceiling style="display:none;margin-left:10px;width: 80%;" ref="openLog"></ceiling>-->
    <div>
      <user-dialog :dialogVisible="dialogVisible"></user-dialog>
    </div>
  </div>
</template>

<script>
    import auth from "../auth/auth"
    import ceiling from './layout/ceiling.vue'
    import userDialog from "../components/dialog/userDialog";

    export default {
        components: {
            "ceiling":ceiling,
            "user-dialog": userDialog
        },
        // props:{
        //     dialogVisible: Object,
        // },
        data () {
            return {
                dialogVisible: {
                    v: false,
                    clickModalClose: false
                },
                data: {
                    body: {
                        username: 'admin',
                        password: 'admin'
                    },
                    rememberMe: false,
                },
                // error: null
            }
        },
        mounted () {
            // window.location.reload();
            if (localStorage.getItem('rememberMe') === 'true') {
                this.$set(this.data, 'rememberMe', true)
            }
        },
        created(){
            // location.reload();
        },
        methods: {
            openLogin(){
                // this.$refs.openLog.userLogin();
                //  this.dialogVisible.v = true;
                this.$Bus.$emit('dialogVisible.v',true);
            },
            login () {
                var info = {
                    username: this.data.body.username,
                    password: this.data.body.password
                }
                auth.login(this, info)
            },
            // TODO: implement the function of 'rememberme'
            onChangeRememberMe(rememberMe){
                console.log(this.data.rememberMe);
            },
            toData(){
                // this.$router.replace("/dataSource/pubData");
                window.open(window.location.origin+'/#/dataSource/pubData');
            },
            toModel(){
                window.open(window.location.origin+'/#/GEE');
            },
            toManage(){
                window.open(window.location.origin+'/#/dataVisible');
            },
        }
    }
</script>

<style lang="less" scoped>
  @import "../style/login.css";

  .is-title {
    text-transform: capitalize;
  }
  .service_icon:hover{
    cursor:pointer;
  }
  /*html, body{*/
  /*overflow: auto;*/
  /*}*/

</style>